<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
       <div class="list" id="taskScore">
          <el-scrollbar class="page-component__scroll" style="height:100%">
            <div style="height:700px;">
              <el-table
                :header-cell-style="{ background: '#f5f5f5' }"
                border
                :data="tableData"
                style="width: 100%"
                height="700px"
                size="small"
              >
               <el-table-column
                  align="center"
                  width="80"
                  prop="index"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="160"
                  prop="subtasksName"
                  label="指标任务名称"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="160"
                  prop="departmentName"
                  label="配合责任单位"
                >
                </el-table-column>
                <el-table-column align="center" label="一季度">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="oneQuarterNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="oneQuarterDegree"
                    label="实际完成量"
                  ></el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree1)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree1)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="二季度">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="twoQuarterNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="twoQuarterDegree"
                    label="实际完成量"
                  ></el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree2)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree2)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="三季度">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="threeQuarterNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="threeQuarterDegree"
                    label="进度"
                  ></el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree3)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree3)
                    }}</template>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="全年">
                  <el-table-column
                    align="center"
                    width="60"
                    prop="allNumber"
                    label="任务量"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    width="60"
                    prop="allDegree"
                    label="实际完成量"
                  >
                  </el-table-column>
                  <el-table-column align="center" label="本季度完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.quaterDegree4)
                    }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="全年目标完成率">
                    <template slot-scope="scope">{{
                      decimal(scope.row.allDegree4)
                    }}</template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
        </div>
    </el-card>

  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.subtasksId = this.$route.query.id;
    this.getListByPage();
  },
  methods: {
      // 百分号
    decimal(val) {
      console.log(val);
      if (val) {
        let _val = val * 100;
        _val = _val.toFixed(2);
        return _val + "%";
      }
    },
       // 获取数据列表
    getListByPage() {
      console.log(this.subtasksId);
      let _obj = {
        subtasksId: +this.subtasksId
      };
      this.$axios
        .post(`/deptTask/getList`, _obj, 2)
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
             this.tableData.forEach((item,index) => {
               item.index = index+1
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped></style>
